<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="jquery-easyui-1.7.0/themes/icon.css">
    <link rel="stylesheet" href="jquery-easyui-1.7.0/themes/default/datagrid.css">
    <link rel="stylesheet" href="jquery-easyui-1.7.0/themes/default/easyui.css">
    <link rel="stylesheet" href="jquery-easyui-1.7.0/demo/demo.css">
    <style>
        #dialog_means_modify{
            display: none;
        }
        #dialog_add_means{
            display: none;
        }
    </style>
</head>
<body class="easyui-layout">
<div id="meas" data-options="title:'资料分类',region:'west',tools:[
			{iconCls:'icon-add',handler:function(){addCategory();}},
			{iconCls:'icon-edit',handler:function(){editCategory();}},
			{iconCls:'icon-remove',handler:function(){deleteCategory();}}
			]" style="width: 200px;">
    <ul id="tree_category1">
        <li></li>
    </ul>
</div>
<div data-options="region:'center'">
    <table id="datagrid_table">
    </table>
</div>
<!--按钮组-->
<div id="buttons_1">
    <a href="#">新增</a>
    <br/>
    标题:<input type="text" name="dtitle" id="dtitle">
    <a href="#" id="search">查询</a>
</div>
<div id="buttons_2">
    <a href="#">添加</a>
</div>
<div id="mdtype_add_buttons">
    <a href="#">添加</a>
</div>
<div id="mdtype_modify_buttons">
    <a href="#">修改</a>
</div>
<!--对话框-->
<div id="dialog11">
    <form id="form_mdtype_add" action="/means/addMdtype" method="post">
        <table>
            <tr>
                <th>类型</th>
                <th><input type="text" name="text"></th>
            </tr>
        </table>
    </form>
</div>
<div id="dialog_modify_mdtype" align="center">
    <form id="form_mdtype_modify" action="/means/modifyMdtype" method="post">
        <table>
            <tr>
                <th>id</th>
                <th><input type="text" name="id" id="id" readonly></th>
                <th>类型</th>
                <th><input type="text" name="text" id="text"></th>
            </tr>
        </table>
    </form>
</div>
<div id="dialog_add_means" align="center">
    <form id="form_means_add" action="/means/addMeans" method="post" enctype="multipart/form-data">
        <table id="datagrid_table_means">
            <tr>
                <td>标题</td>
                <td><input type="text" name="dtitle" id="dtitle1"></td>
                <td>所属分类</td>
                <td><input type="text" name="dtype" id="dtype1"></td>
            </tr>
            <tr>
                <td>阅读量</td>
                <td><input type="text" name="dreadcount" id="dreaddcount1"></td>
            </tr>
            <tr>
                <td>创建人</td>
                <td><input type="text" name="dname" id="dname1"></td>
                <td>创建时间</td>
                <td><input type="text" name="dsdate" id="dsdate1"></td>
            </tr>
            <tr>
                <td>附件</td>
                <td><input type="text" name="dannex" id="dannex1"></td>
            </tr>
        </table>
    </form>
</div>
<div id="dialog_means_modify" align="center">
    <form id="form_means_modify" action="/means/modifyMeans" method="post" enctype="multipart/form-data">
        <table>
            <tr>
                <td>id</td>
                <td><input type="text" name="did" id="did2" readonly></td>
                <td>阅读量</td>
                <td><input type="text" name="dreadcount" id="dreaddcount2"></td>

            </tr>
            <tr>
                <td>标题</td>
                <td><input type="text" name="dtitle" id="dtitle2"></td>
                <td>所属分类</td>
                <td><input type="text" name="dtype" id="dtype2"></td>

            </tr>
            <tr>
                <td>创建人</td>
                <td><input type="text" name="dname" id="dname2"></td>
                <td>创建时间</td>
                <td><input type="text" name="dsdate" id="dsdate2"></td>
            </tr>
            <tr>
                <td>附件</td>
                <td><input type="text" name="dannex" id="dannex2"></td>

            </tr>
            <tr>
                <td><a href="#" class="modify_means">修改</a></td>
            </tr>
        </table>
    </form>
</div>
</body>
<script src="jquery-easyui-1.7.0/jquery.min.js"></script>
<script src="jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
<script src="jquery-easyui-1.7.0/locale/easyui-lang-zh_CN.js"></script>
<script>
    var means = {
        /*
        * value:这一列的数据的值
        * row:当前行的json数据
        * index:数据所在行的下标
        * */
        op_fmt: function (value, row, index) {
            return '<a href="#" class="means_remove_btn">删除</a><a href="#" class="means_showupdate_btn">修改</a>'

        }
    }
    $("#tree_category1").tree({
        url: 'http://localhost:8080/means/findAllMdtype',
        lines: true,
    });

    function addCategory() {
        $("#dialog11").dialog({
            title: '添加类型',
            width: 520,
            buttons: "#mdtype_add_buttons",
            closed: false,
            modal: true
        });
    };

    function editCategory() {
        var id = $("#tree_category1").tree('getSelected').id;
        var text = $("#tree_category1").tree('getSelected').text;
        $("#dialog_modify_mdtype").dialog({
            title: '修改类型',
            iconCls: 'icon-man',
            width: 420,
            buttons: "#mdtype_modify_buttons",
            modal: true,
            closed: false
        });
        $("#id").val(id);
        $("#text").val(text);
    }

    function deleteCategory() {
        var id = $("#tree_category1").tree('getSelected').id;
        alert("确定要删除吗？");
        $.post("/means/delMdtypeById", {"id": id}, rs => {
            if (rs.code == 200) {
                $.messager.show({
                    title: '提示信息',
                    msg: rs.data
                });
                $("#tree_category1").tree('reload');
            }
        })
    }

    $("#form_means_add").form({
        success: function (rs) {
            $("#dialog_add_means").dialog({
                closed: true,
            });
            $.messager.show({
                title: '提示信息',
                msg: "添加成功"
            });
            $("#form_means_add").form('clear');
            $("#datagrid_table").datagrid('reload');

        }
    });
    $("#datagrid_table").datagrid({

        url: 'http://localhost:8080/means/findAllMeans',
        columns: [[
            {field: 'did', title: 'id', width: 80},
            {field: 'dtype', title: '所属分类', width: 100},
            {field: 'dtitle', title: '标题', width: 100},
            {field: 'dreadcount', title: '阅读次数', width: 100,},
            {field: 'dannex', title: '附件', width: 200,},
            {field: 'dname', title: '创建人', width: 100,},
            {field: 'dsdate', title: '创建时间', width: 200,},
            {field: 'gg', title: '操作', width: 200, formatter: means.op_fmt},
        ]],
        toolbar: "#buttons_1",
        height: 635,
        width: 1148,
        pagination: true,
        //fitColumns: true,//让表格列宽，强行自适应整个页面宽度
        striped: true,//实现斑马线效果
        rownumbers: true,
        onLoadSuccess: function () {
            //datagrid数据加载完毕之后，执行的代码
            //
            $(".means_remove_btn").linkbutton({
                iconCls: "icon-cancel",
                onClick: function () {
                    //获取当前行的id
                    alert("确定要删除吗？");
                    var did = $(this).parent().parent().parent().children().eq(0).find("div").text();
                    console.log(did);
                    $.post("/means/delByDid", {"did": did}, rs => {
                        if (rs.code == 200) {
                            $("#datagrid_table").datagrid('reload');
                            $.messager.show({
                                title: "提示信息",
                                msg: rs.data
                            });
                        }
                    });
                }
            });

            $(".means_showupdate_btn").linkbutton({
                iconCls: "icon-edit",
                onClick: function () {
                    $("#dialog_means_modify").dialog({
                        width: 520,
                        height: 300,
                        modal: true,
                        closed: false,
                        title:'修改',
                    });
                    //获取当前行的数据的id值
                    var did = $(this).parent().parent().parent().children().eq(0).find("div").text();
                    //ajax请求，根据id从控制器，获得对应的organ信息
                    //填充在form表单中“.load"
                    $("#form_means_modify").form('load', "http://localhost:8080/means/getByDid?did=" + did);
                }
            });
            $(".modify_means").linkbutton({
                iconCls: 'icon-ok',
                onClick: function () {
                    $("#form_means_modify").form('submit');
                }
            })
        }
    });
    $("#form_means_modify").form({
        success: function (rs) {
            $.messager.show({
                title: '提示信息',
                msg: "修改成功"
            });
            $("#dialog_means_modify").dialog({
                closed: true
            })
            $("#form_means_modify").form('clear');
            $("#datagrid_table").datagrid('reload')
        }
    })

    $("#buttons_2 a:contains(添加)").linkbutton({
        iconCls: 'icon-ok',
        onClick: function () {
            $("#form_means_add").form('submit');
        }
    });

    $("#buttons_1 a:contains(新增)").linkbutton({
        iconCls: 'icon-add',
        onClick: function () {
            $("#dialog_add_means").dialog({
                title: '添加',
                width: 520,
                height: 300,
                iconCls: "icon-man",
                modal: true,
                closed: false,
                buttons: "#buttons_2"
            });
        }
    });

    $("#search").linkbutton({
        iconCls: 'icon-search',
        onClick: function () {
            var dtitle = $("#dtitle").val();
            //使用datagrid的load方法，发送请求,load方法自动发送datagrid的URL，再加上mname
            $("#datagrid_table").datagrid('load', {"dtitle": dtitle});
        }
    });
    $("#sdate").datetimebox({editable: false});
    $("#edate").datetimebox({editable: false});
    /*$("#dialog11").dialog({

    });*/
    $("#mdtype_add_buttons a:contains(添加)").linkbutton({
        iconCls: 'icon-man',
        onClick: function () {
            //第一步，将数据提交到后台服务器
            $("#form_mdtype_add").form('submit');
        }
    });
    $("#form_mdtype_add").form({
        //提交成功后的回调函数
        success: function (rs) {
            console.log(rs);
            var json = JSON.parse(rs);
            $.messager.show({
                title: "提示信息",
                msg: json.data
            });
            //将dialog关闭
            $("#dialog11").dialog({
                closed: true
            });
            //将当前datagrid重新加载
            $("#tree_category1").tree('reload');
            //清空表单
            $("#form_mdtype_add").form('clear');
        }
    });

    $("#mdtype_modify_buttons a:contains(修改)").linkbutton({
        iconCls: 'icon-ok',
        onClick: function () {
            //提交表单
            $("#form_mdtype_modify").form('submit');
        }
    });
    $("#form_mdtype_modify").form({
        success: function (rs) {
            //
            var json = JSON.parse(rs);
            //弹出框
            $.messager.show({
                title: '提示信息',
                msg: json.data
            });
            $("#tree_category1").tree('reload');//让树重新加载
            $("#form_mdtype_modify").form('clear');//清空内容
            $("#dialog_modify_mdtype").dialog({
                closed: true,
            })


        }
    });


    //生效下拉列表
    $("#dtype1").combobox({
        url: 'http://localhost:8080/means/findAllMdtype',
        textField: "text",
        valueField: "id",
    });
    $("#dsdate1").datetimebox();
    $("#dtitle1").textbox();
    $("#dname1").textbox();
    $("#dreaddcount1").numberbox();
    $("#dannex1").filebox({
        title: '上传附件',
        iconCls: 'icon-save'
    });
    $("#dreaddcount2").numberbox();
    $("#dannex2").filebox({
        title: '上传附件',
        iconCls: 'icon-save'
    });
    $("#did2").textbox();
    $("#dtitle2").textbox();
    $("#dtype2").combobox({
        url: 'http://localhost:8080/means/findAllMdtype',
    });
    $("#dname2").textbox();
    $("#dsdate2").datetimebox()
</script>
</html>